<script setup lang="ts">
import {useTemplateRef,ref,onMounted} from "vue";
import Border from "@/components/Border.vue";
import Card from "@/components/Card.vue";

// 第一个参数必须与模板中的 ref 值匹配
const emailInput=useTemplateRef("email-input");
const items=useTemplateRef("items");

onMounted(()=>{
  emailInput.value?.focus();
  console.log(items.value);
})

const list=ref([
    "张三","李四","王五","赵六","钱七",
]);

</script>

<template>
  <Card title="访问模板引用">
    <input type="text" ref="email-input">
  </Card>
  <Card title="v-for 中的模板引用">
    <ul>
      <li v-for="(item,index) of list" ref="items">{{item}}</li>
    </ul>
  </Card>

</template>

<style scoped>

</style>